<template>
  <div :id="'print_'+data.commodityCode">
    <div id="dvMain" style="border:0px solid black;height:10cm;width:9.94cm;font-family:Calibri;background-color:white;font-weight:bold;">
      <div style="float:left;border:1px solid black;height:1.5cm;width:3.0cm;font-family:Calibri;font-size:10px;position:relative;">
        <p style="border:0px solid black;text-align:center;margin:2px 0px 10px;0px;padding:0px;top:4px;left:20px;position:absolute;">TAIPEI TAIWAN</p>
        <p style="border:0px solid black;text-align:center;margin:0px;padding:0px;top:24px;left:20px;position:absolute;">POSTAGE PAID</p>
        <p style="border:0px solid black;text-align:center;margin:0px;padding:0px;top:40px;left:10px;position:absolute;">LICENCE NO. TP6874</p>
      </div>
      <div style="float:left;border:1px solid black;border-left:0px;height:1.5cm;width:6.86cm;font-family:Calibri;font-size:10px;position:relative">
        <p style="border:0px solid black;text-align:center;margin:0px 0px 5px;0px;padding:0px;font-weight:bold;top:3px;left:30px;position:absolute;">CHUNGHWA POST CO., LTD.</p>
        <p style="border:0px solid black;text-align:center;margin:0px 0px 5px;0px;padding:0px;font-weight:bold;font-size:18px;top:4px;left:200px;position:absolute;">CN22</p>
        <p style="border:0px solid black;text-align:center;margin:0px 0px 5px;0px;padding:0px;top:16px;left:20px;position:absolute;">From:</p>
        <p style="border:0px solid black;text-align:center;margin:0px 0px 5px;0px;padding:0px;top:31px;left:20px;position:absolute;">P. O. Box 100561-017301, Taipei, Taiwan</p>
        <p style="border:0px solid black;text-align:center;margin:0px 0px 5px;0px;padding:0px;top:44px;left:20px;position:absolute;">This Parcel is Transit in Taiwan Free Zone</p>
      </div>
      <div style="text-align:center;margin-top:0px;float:left;border:1px solid black;border-top:0px;height:1.3cm;width:9.90cm;font-family:Calibri;font-size:12px;position:relative;">
        <barcode v-if="data.afterCode" elementTag="canvas" margin-top="8" :displayValue="false" :value="data.afterCode">Show this if the rendering fails.</barcode>
        <p style="border:0px solid black;text-align:center;width:100%;margin:0px;padding:0px;top:30px;left:0px;position:absolute;font-size:18px;" v-text="data.afterCode"></p>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:2.3cm;width:9.9cm;font-family:Calibri;font-size:14px;position:relative;">
        <p style="border:0px solid black;text-align:left;width:98%;margin:0px;padding:0px;top:3px;left:5px;font-weight:bold;position:absolute;">Send To:</p>
        <p style="border:0px solid black;text-align:left;width:98%;margin:0px;padding:0px;position:absolute;top:18px;left:5px;">
          Name:
          <span v-text="data.recipientsName"></span>
        </p>
        <p style="border:0px solid black;text-align:left;width:98%;margin:0px;padding:0px;position:absolute;top:34px;left:5px;">
          Address:
          <span v-text="data.recipientsAddress"></span>
        </p>
        <p style="border:0px solid black;text-align:left;width:100%;margin:0px;padding:0px;position:absolute;top:70px;left:230px;">
          Postal code:
          <span v-text="data.recipientsPostcode"></span>
        </p>
        <p style="border:0px solid black;text-align:left;width:100%;margin:0px;padding:0px;position:absolute;top:70px;left:5px;">
          Tel:
          <span v-text="data.recipientsPhone"></span>
        </p>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:0.4cm;width:9.9cm;font-family:Calibri;font-size:9px;position:relative;padding:0px;margin:0px;">
        <p style="position:absolute;top:2px;left:10px;border:1px solid black;margin:0px;padding:0px;width:8px;height:8px;text-align:center;line-height:10px;">√</p>
        <p style="position:absolute;top:1px;left:30px;border:0px solid red;margin:0px;padding:0px;">Gift</p>
        <p style="position:absolute;top:2px;left:70px;border:1px solid black;margin:0px;padding:0px;width:8px;height:8px;text-align:center;line-height:10px;"></p>
        <p style="position:absolute;top:1px;left:85px;border:0px solid red;margin:0px;padding:0px;">Commercial sample</p>
        <p style="position:absolute;top:2px;left:200px;border:1px solid black;margin:0px;padding:0px;width:8px;height:8px;text-align:center;line-height:10px;"></p>
        <p style="position:absolute;top:1px;left:215px;border:0px solid red;margin:0px;padding:0px;">Documents</p>
        <p style="position:absolute;top:2px;left:290px;border:1px solid black;margin:0px;padding:0px;width:8px;height:8px;text-align:center;line-height:10px;"></p>
        <p style="position:absolute;top:1px;left:305px;border:0px solid red;margin:0px;padding:0px;">Other</p>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:0.4cm;width:9.9cm;font-family:Calibri;position:relative;padding:0px;margin:0px;font-size:9px;">
        <div style="float:left;border-right:1px solid black;height:100%;width:6.0cm;text-align:center;">Quantity and detailed description of contents</div>
        <div style="float:left;border-right:1px solid black;height:100%;width:1.9cm;text-align:center;">Weight(Kg)</div>
        <div style="float:left;border-right:0px solid black;height:100%;width:1.9cm;text-align:center;">Value</div>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:1cm;width:9.9cm;font-family:Calibri;font-size:9px;position:relative;padding:0px;margin:0px;">
        <div style="float:left;border-right:1px solid black;height:100%;width:6.0cm;text-align:center;">{{data.commodityName}}</div>
        <div style="float:left;border-right:1px solid black;height:100%;width:1.9cm;text-align:center;">{{data.weight}}</div>
        <div style="float:left;border-right:0px solid black;height:100%;width:1.9cm;text-align:center;">USD {{data.price}}</div>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:0.7cm;width:9.9cm;font-family:Calibri;font-size:9px;position:relative;padding:0px;margin:0px;">
        <div style="float:left;border-right:1px solid black;height:100%;width:6.0cm;text-align:center;padding:0px;margin:0px;">For commercial items only if known, HS tariff number and country of origin of goods.</div>
        <div style="float:left;border-right:1px solid black;height:100%;width:1.9cm;text-align:center;padding:0px;margin:0px;">Total weight</div>
        <div style="float:left;border-right:0px solid black;height:100%;width:1.9cm;text-align:center;padding:0px;margin:0px;">Total Value</div>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:0.7cm;width:9.9cm;font-family:Calibri;font-size:9px;position:relative;padding:0px;margin:0px;">
        <div style="float:left;border-right:1px solid black;height:100%;width:6.0cm;text-align:center;">{{data.commodityName}}</div>
        <div style="float:left;border-right:1px solid black;height:100%;width:1.9cm;text-align:center;">{{data.weight * data.amount}}</div>
        <div style="float:left;border-right:0px solid black;height:100%;width:1.9cm;text-align:center;">NTD {{data.totalPrices}}</div>
      </div>
      <div style="float:left;border:1px solid black;border-top:0px;height:1.45cm;width:9.9cm;font-family:Calibri;font-size:8px;position:relative;padding:0px;margin:0px;">
        <p style="position:absolute;top:0px;left:2px;border:0px solid red;margin:0px;padding:0px;">I, the undersigned, whose name and address are given on the item, certify that the particulars given in this declaration are correct and that this item does not contain any dangerous article or articles prohibited by legislation or by postal or customs regulations.</p>
        <p style="position:absolute;top:40px;left:2px;border:0px solid red;margin:0px;padding:0px;">Date and sender’s signature:</p>
        <p style="position:absolute;top:40px;left:240px;border:0px solid red;margin:0px;padding:0px;">HUANG,TSUN-MING</p>
      </div>
    </div>
  </div>
</template>

<script>
import VueBarcode from "vue-barcode";
export default {
  components: {
    barcode: VueBarcode
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style>
</style>
